<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">订单列表</h1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/message">待处理消息</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br>

    <el-form :model="form" label-width="120px">
      <div class="block">
        <span class="demonstration">订单创建时间</span>
        <el-date-picker style="margin-left: 20px"
                        v-model="form.orderTime"
                        type="date"
                        placeholder="选择时间"
                        size="default"
                        value-format="YYYY-MM-DD hh:mm:ss"
        />
      </div>
      <br/>
      <div class="block">
        <span class="demonstration">订单截止时间</span>
        <el-date-picker style="margin-left: 20px"
                        v-model="form.checkoutTime"
                        type="date"
                        placeholder="选择时间"
                        size="default"
                        value-format="YYYY-MM-DD hh:mm:ss"
        />
      </div>
      <br/>

      <el-form-item label="订单状态" :label-width="formLabelWidth">
        <el-select v-model="form.status" clearable placeholder="Select">
          <el-option
              v-for="item in statusList"
              :key="item.status"
              :label="item.name"
              :value="item.status"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="用户" :label-width="formLabelWidth">
        <el-select v-model="form.userId" clearable placeholder="Select">
          <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商家" :label-width="formLabelWidth">
        <el-select v-model="form.merchantId" clearable placeholder="Select">
          <el-option
              v-for="item in merchantList"
              :key="item.id"
              :label="item.shopName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">查询</el-button>
        <el-button  @click="resetClick">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">查询结果</el-divider>

    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" :selectable="selectable"/>
      <el-table-column prop="id" label="ID" width="120" sortable />
      <el-table-column prop="userName" label="买家名" width="180" sortable />
      <el-table-column prop="merchantName" label="卖家名" width="180" sortable />
      <el-table-column prop="status" label="状态" width="180">
        <template #default="scope">
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)<0)" type="danger">已退款订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===4)" type="success">已完成订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===3)" type="info">待评价订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===1)" type="info">待完成订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===2)" type="primary">待送达订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===0)" type="warning">待付款订单</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="orderTime" label="创建时间" width="180" sortable />
      <el-table-column prop="checkoutTime" label="截止时间" width="180" sortable />
      <el-table-column prop="consignee" label="收件人姓名" width="180" />
      <el-table-column prop="phone" label="收件人电话" width="180" />
      <el-table-column prop="address" label="收件人详细地址" width="180" />
      <el-table-column prop="notes" label="备注" width="180" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
              link
              type="primary"
              size="large"
              @click.prevent="detail(scope.$index)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
    <el-pagination
                   :background=true
                   v-model:total="totalCount"
                   v-model:page-size="form.pageSize"
                   :small=false
                   :page-sizes="[5, 10, 20, 50]"
                   @size-change="handleSizeChange"
                   layout="sizes, prev, pager, next, jumper"
                   @current-change="changePageNumber" />
    </div>
    <div class="demo-pagination-block" style="margin-top: 20px">
      <el-button type="primary" @click="clickAdd">新增订单信息...</el-button>
    </div>



    <!--  消息对话框    -->

    <el-dialog v-model="dialogFormVisible" title="添加用户">
      <el-form :model="addForm">
        <el-form-item label="用户" :label-width="formLabelWidth">
          <el-select v-model="addForm.userId" clearable placeholder="Select">
            <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商家" :label-width="formLabelWidth">
          <el-select v-model="addForm.merchantId" clearable placeholder="Select">
            <el-option
                v-for="item in merchantList"
                :key="item.id"
                :label="item.shopName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-select v-model="addForm.status" clearable placeholder="Select">
            <el-option
                v-for="item in statusList"
                :key="item.status"
                :label="item.name"
                :value="item.status"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="下单时间" :label-width="formLabelWidth">
          <el-date-picker style="margin-left: 20px"
                          v-model="addForm.orderTime"
                          type="date"
                          placeholder="选择时间"
                          size="default"
                          value-format="YYYY-MM-DD hh:mm:ss"
          />
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker style="margin-left: 20px"
                          v-model="addForm.checkoutTime"
                          type="date"
                          placeholder="选择时间"
                          size="default"
                          value-format="YYYY-MM-DD hh:mm:ss"
          />
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="addForm.number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="合计" :label-width="formLabelWidth">
          <el-input v-model="addForm.amount" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收件人姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.consignee" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收件人电话" :label-width="formLabelWidth">
          <el-input v-model="addForm.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收件人详细地址" :label-width="formLabelWidth">
          <el-input v-model="addForm.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="addForm.notes" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmClickAdd"
            :disabled= "addForm.userId==='' || addForm.merchantId==='' || addForm.orderTime==='' ||
                         addForm.checkoutTime==='' || addForm.consignee==='' || addForm.phone==='' ||
                           addForm.address==='' || addForm.notes===''">
          确认添加
        </el-button>
      </span>
      </template>
    </el-dialog>

  </el-card>

</template>

<script setup>
import store from "@/store";
import {onMounted, reactive, ref} from "vue";
import {findAll, getUserById} from "@/api/user";
import router from "@/router";
import {addOrder, searchOrder} from "@/api/order";
import {getMerchantById, searchMerchants} from "@/api/merchant";


// 通用的状态栏
const statusList = ref([
  {
    status: 0,
    name: "未付款"
  },
  {
    status: 1,
    name: "未完成"
  },
  {
    status: 2,
    name: "未送达"
  },
  {
    status: 3,
    name: "未评价"
  },
  {
    status: 4,
    name: "已完成"
  },
  {
    status: 5,
    name: "正在退款"
  },
  {
    status: -2,
    name: "未选择"
  },
])






const tableData = ref([]); // table数据

const dialogFormVisible = ref(false); // 添加弹出框的显示与否

const formLabelWidth = '100px';

const select_list = ref([]);

const userList = ref([]);

const merchantList = ref([]);


// 禁用一些行的选择，对于订单而言
const selectable = (row, index) => {
  let flag = true;
  if(row.status === 3 || row.status === 4){
    flag = false;
  }
  return flag;
}

// 查询表单
const form = reactive({
  id: 0,
  number: 1,
  status: -2,
  userId: "",
  userName: false,
  merchantId: "",
  merchantName: "",
  pageSize: 5,
  pageNum: 1,
  orderTime: "",
  checkoutTime: "",
  addressBookId: 0,
  payMethod: 0,
  amount: 0,
  consignee: "",
  phone: "",
  address: "",
  notes: "",
  commission: 0
});

// 添加表单
const addForm = reactive({
  id: 0,
  status: -2,
  userId: "",
  userName: false,
  merchantId: "",
  merchantName: "",
  pageSize: 5,
  pageNum: 1,
  orderTime: "",
  checkoutTime: "",
  addressBookId: 0,
  payMethod: 0,
  amount: 0,
  consignee: "",
  phone: "",
  address: "",
  notes: "",
  number: 1,
  commission: 0
});


// 进入详情页修改信息
const detail = (index) => {
  const item = reactive(tableData.value[index]);
  console.log(item.id);
  router.push({
    name: 'ordersDetail',
    params: {
      id: item.id,
    }});
}

// 获取订单的状态
const getStatus = (index) => {
  return tableData.value[index].status;
}


// 点击添加事件
const confirmClickAdd = () => {
  dialogFormVisible.value = false;
  console.log(addForm);
  addOrder(addForm).then(() => {
    myPage();
  });
}

const clickAdd = () => {
  dialogFormVisible.value = true;
}

// 渲染颜色使用的
const tableRowClassName = ({row, rowIndex}) => {
    if (rowIndex % 4 === 0) {
      return 'warning-row';
    } else if (rowIndex % 4 === 2) {
      return 'success-row';
    }
    return '';
}


const handleSelectionChange = (selection) => {
  select_list.value = selection;
}



const totalCount = ref(10);

// 点击查询所有的订单信息
const searchClick = () => {
  myPage();
};

const resetClick = () => {
  form.sex = null;
  form.pageNum = 1;
  form.name = "";
  form.username = "";
  form.phone = "";
  form.pageSize = 5;
  myPage();
}

const changePageNumber = (pageNum) => {
  form.pageNum = pageNum;
  myPage();
}

onMounted(async () => {
  myPage();
  findAll().then((res) => { // 非异步处理
    userList.value = res.data;
    console.log(userList.value);
  });
  searchMerchants().then((res) => {
    merchantList.value = res.data;
  })
});

const myPage = () => {
  console.log("data");
  console.log(form);
  if(form.checkoutTime === null) form.checkoutTime = "";

  if(form.orderTime === null) form.orderTime = "";

  searchOrder(form).then(async (res) => {
    console.log(res);
    tableData.value = res.data.list;
    totalCount.value = res.data.total;
  });
}

const handleSizeChange = () => {
  myPage();
}

</script>
<style scoped>
.course {
  font-weight: bold;
  display: inline-block;
}
.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-table >>> .warning-row {
  background: oldlace;
}
.el-table >>> .success-row {
  background: #f0f9eb;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
